<template>
  <div class="trend-container">
      <div class="trend" ref="trend_ref">
          襄阳
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            chartInstance:null,
            trendData:null,
        }
    },
    mounted(){
        this.initChart();
        // this.getData();
        // window.addEventListener('resize',this.screenAdapter)
        // this.screenAdapter();
    },
    destroyed(){
        window.removeEventListener('resize',this.screenAdapter)
    },
    methods:{
        initChart(){    
            this.chartInstance = this.$echarts.init(this.$refs.trend_ref);
            const initOption= {
                xAxis:{
                    type:'category'
                },
                yAxis:{
                    type: 'value'
                }
            };
            this.chartInstance.setOption(initOption);
        },
        async getData(){
            const {data:ret} = await this.$https('/api/trend');
            this.trendData = ret
            console.log(this.trendData);
            this.updateChart();
        },
        updateChart(){
            const  mouthV = this.trendData.common.mouth;
            const legendV =this.trendData.map.data.map(item=>{
                return item.name
            })
            const yV = this.trendData.map.data.map((item,index)=>{
                console.log(item);
                return {
                    name:item.name,
                    type:'line',
                    data:item.data
                }
            })
            console.log(yV)
            const updateOption = {
                xAxis:{
                    data:mouthV
                },
                series:yV,
                legend:{
                    data:legendV.reverse()
                }
            };
            this.chartInstance.setOption(updateOption)
        },
        screenAdapter(){
            const adapterOption = {};
            this.chartInstance.setOption(adapterOption)
            this.chartInstance.resize();
        }
    }
}
</script>

<style>

</style>